{extend name="layout/plugin_layout" /}

{block name="title"}{$plugin.title} - {$app.title}{/block}

{block name="head"}
{/block}
{block name="main"}
<div class="container mx-auto" id="app">
    <div class="card lg:card-side bordered shadow-lg">
        <div class="card-body">
            <div class="alert shadow-lg bg-base-200/30">
                <div>

                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#2196f3"
                         class="w-6 h-6 mx-2">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>支持直接输入\n、\r、\t</span>
                </div>
            </div>
            <div class="form-control">
                <label class="label">
                    <span class="label-text">文本</span>
                </label>
                <textarea class="textarea textarea-bordered" v-model="input" rows="5" placeholder="请输入需要去重的文本"
                          @keyup.enter="deduplicate"></textarea>
            </div>
            <div class="form-control">
                <label class="cursor-pointer label">
                    <span class="label-text">去除首尾空格</span>
                    <input v-model="space" type="checkbox" class="toggle">
                </label>
            </div>
            <div class="flex md:flex-row gap-3">
                <div class="form-control flex-1">
                    <label class="label">
                        <span class="label-text">去重前分割符</span>
                    </label>
                    <input type="text" v-model="pre" class="input input-bordered" placeholder="请输入去重前分割符">
                </div>
                <div class="form-control flex-1">
                    <label class="label">
                        <span class="label-text">去重后分割符</span>
                    </label>
                    <input type="text" v-model="next" class="input input-bordered" placeholder="请输入去重后分割符">
                </div>
            </div>
            <div class="card-actions gap-2 my-4">
                <button class="btn btn-primary flex-1" @click="deduplicate">去重</button>
                <button class="btn btn-primary flex-1" @click="reset">清空</button>
                <button class="btn btn-primary flex-1" @click="reset">复制结果
                    <button>
            </div>

            <div class="form-control" v-show="output">
                <label class="label">
                    <span class="label-text">结果</span>
                </label>
                <textarea class="textarea textarea-bordered" v-text="output" rows="5" readonly></textarea>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            input: '',
            output: '',
            pre: '\\n',
            next: '\\n',
            space: true,
        },
        methods: {
            deduplicate() {
                const objs = {
                    '\\n': '\n',
                    '\\r': '\r',
                    '\\t': '\t',
                }
                let {pre, next} = this
                for (const k in objs) {
                    pre = pre.replaceAll(k, objs[k])
                    next = next.replaceAll(k, objs[k])
                }
                const split = this.input.split(pre);
                let strings = [...new Set(split)];
                this.space && (strings = strings.map(v => v.trim()))
                this.output = strings.filter(v => v).join(next)
            },
            reset() {
                this.input = ''
                this.output = ''
            },
        },
    })
</script>

{/block}
